<template>
  <div class="response-time-distribution-chart">
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'ResponseTimeDistributionChart',
  props: {
    distributionData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeUnmount() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  watch: {
    distributionData: {
      handler() {
        this.updateChart();
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      if (!this.$refs.chart) return;
      
      this.chartInstance = echarts.init(this.$refs.chart);
      this.updateChart();
      
      // 响应式处理
      window.addEventListener('resize', this.handleResize);
    },
    
    updateChart() {
      if (!this.chartInstance) return;
      
      const option = this.getChartOption();
      this.chartInstance.setOption(option, true);
    },
    
    getChartOption() {
      const { categories, values } = this.distributionData;
      
      // 计算颜色渐变
      const colors = [
        '#10b981', // 绿色 - 优秀
        '#3b82f6', // 蓝色 - 良好
        '#f59e0b', // 橙色 - 一般
        '#ef4444', // 红色 - 较差
        '#dc2626'  // 深红 - 很差
      ];
      
      return {
        backgroundColor: 'transparent',
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#e2e8f0',
          borderWidth: 1,
          textStyle: {
            color: '#1f2937'
          },
          formatter: (params) => {
            const param = params[0];
            const percentage = ((param.value / values.reduce((a, b) => a + b, 0)) * 100).toFixed(1);
            return `
              <div style="font-weight: 600; margin-bottom: 8px;">${param.name}</div>
              <div style="display: flex; align-items: center; margin: 4px 0;">
                <span style="display: inline-block; width: 12px; height: 12px; background: ${param.color}; border-radius: 50%; margin-right: 8px;"></span>
                <span style="flex: 1;">请求数量:</span>
                <span style="font-weight: 600; color: ${param.color};">${param.value}</span>
              </div>
              <div style="color: #64748b; font-size: 12px;">占比: ${percentage}%</div>
            `;
          }
        },
        xAxis: {
          type: 'category',
          data: categories,
          axisLine: {
            lineStyle: {
              color: '#e2e8f0'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#64748b',
            fontSize: 11,
            interval: 0,
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          name: '请求数量',
          nameTextStyle: {
            color: '#64748b',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#f1f5f9',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#64748b',
            fontSize: 12
          }
        },
        series: [
          {
            name: '响应时间分布',
            type: 'bar',
            data: values.map((value, index) => ({
              value: value,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: colors[index] },
                  { offset: 1, color: echarts.color.modifyAlpha(colors[index], 0.7) }
                ]),
                borderRadius: [4, 4, 0, 0]
              }
            })),
            barWidth: '60%',
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: echarts.color.modifyAlpha(colors[0], 0.8) },
                  { offset: 1, color: echarts.color.modifyAlpha(colors[0], 0.6) }
                ])
              }
            },
            animationDelay: (idx) => idx * 100
          }
        ],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicOut'
      };
    },
    
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    }
  }
};
</script>

<style scoped>
.response-time-distribution-chart {
  width: 100%;
  height: 100%;
}

.chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
}
</style> 